<template>
  <div>
    <el-table
      v-loading="listLoadingtow"
      :data="SummaryData"
      :header-cell-style="{
        background: '#f2f2f2',
        color: '#606266',
        height: '10px',
        padding: '5px'
      }"
      :row-style="{ height: '40px', padding: '0px' }"
      :cell-style="{ padding: '0px' }"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      height="637px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column :label="$t('table.worker_id')" align="center">
        <template slot-scope="scope">
          {{ scope.row.person_id }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.worker_name')" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.company')" align="center">
        <template slot-scope="scope">
          {{ scope.row.company }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.department')" align="center">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.late_total')">
        <template slot-scope="scope">
          {{ scope.row.late_total }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.late_time')">
        <template slot-scope="scope">
          {{ scope.row.late_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.leave_early_total')">
        <template slot-scope="scope">
          {{ scope.row.leave_early_total }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.leave_early_time')">
        <template slot-scope="scope">
          {{ scope.row.leave_early_time }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.remark')">
        <template slot-scope="scope">
          {{ scope.row.desc }}
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="current_page"
        :page-sizes="[10, 50, 100]"
        :page-size="per_page"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  service_summaryAll
} from '@/api/StatisticalReports/StatisticalReports'
import store from '@/store'

export default {
  components: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  props: ['listQuery'],
  data() {
    return {
      SummaryData: null,
      list: null,
      listLoadingtow: true,
      total: null,
      multipleSelection: [],
      current_page: null,
      last_page: null,
      per_page: null
    }
  },
  created() {
    this.getLists()
    console.log(this.listQuery, '77777777777')
  },
  methods: {
    // 获取展示列表数据
    getLists() {
      this.listLoadingtow = true
      service_summaryAll(store.getters.token, this.listQuery).then(res => {
        console.log(res, 'rrrrrsssss888')
        this.SummaryData = res.data.data.data
        this.current_page = res.data.current_page
        this.per_page = res.data.data.per_page
        this.last_page = res.data.data.last_page
        this.total = res.data.data.total
        this.listLoadingtow = false
      })
      // 获取汇总数据
    },
    // 分页相关方法
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    handleSelectionChange(val) {
      console.log(val, 'oooooooooooooooooooooo')
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.device_id)
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  border-top: #eee solid 10px;
}
.pagination-container{
  margin-top: 25px;
}

</style>
